<template>
    <div>
        <div class="box_bg">
            <h2 class="box_tit">
                <i class="icon icon1"></i>专业管理
                <i class="reti"></i>
            </h2>
            <div class="source">
                <!-- 内容区域 fixed-->
                <div :gutter="25">
                    <div class="sourceLeft">
                        <!-- 树形结构 -->
                        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
                        </el-input>
                        <el-tree class="filter-tree"
                            node-key="id"
                            :default-checked-keys="[0]"
                            :props="schoolTree.props"
                            :empty-text="schoolTree.emptyText"
                            :filter-node-method="filterNode"
                            :load="loadNode"
                            ref="schoolTree"
                            lazy
                            @node-click="handleTreeNodeClick">
                        </el-tree>
                    </div>
                    <div class="sourceRight">
                        <div class="text">
                            <!-- 选项卡  -->
                            <el-tabs v-model="tab.selectTabName" type="border-card" v-if="hasPermission('profession:view')">
                                <el-tab-pane label="专业管理" name="class">
                                    <div class="components_searchs"  @keyup.enter="queryProfession">
                                        <span class="tit">专业代码：</span>
                                        <el-input clearable placeholder="请输入专业代码" v-model="professionTable.queryParams.professionNo"></el-input>

                                        <span class="tit">专业名称：</span>
                                        <el-input clearable placeholder="请输入专业名称" v-model="professionTable.queryParams.professionName"></el-input>

                                        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryProfession" style="margin-left:7px;">查询</el-button>
                                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resert">重置</el-button>
                                    </div>
                                    <div class="components_btns">
                                        <el-button v-has="'profession:add'" type="primary" icon="el-icon-plus" size="mini" @click="showAddClassDialog">添加专业</el-button>
                                    </div>

                                    <div class="scrollBarX">
                                        <vue-table
                                            :api-url="professionTable.apiUrl"
                                            :fields="professionTable.fields"
                                            :appendParams="professionTable.queryParams"
                                            :content="self"
                                            ref="professionTable">
                                        </vue-table>
                                    </div>

                                </el-tab-pane>
                                <el-tab-pane label="联系人" name="trainSche" v-if="hasPermission('address:view')">

                                    <div class="components_searchs" @keyup.enter="queryPerson">
                                        <span class="tit">联系人：</span>
                                        <el-input clearable placeholder="请输入联系人名称" v-model="addressBookTable.queryParams.name">
                                        </el-input>

                                        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryPerson" style="margin-left:7px;">查询</el-button>
                                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resertPerson">重置</el-button>
                                    </div>
                                    <div class="components_btns">
                                        <el-button v-has="'address:add'" type="primary" icon="el-icon-plus" size="mini" @click="showAddPersonDialog">添加联系人</el-button>
                                        <a v-has="'address:export'" href="javascript:void(0)" class="btns" @click="exportPerson">
                                            <i class="iconfont icon-leading-iout"></i>
                                            导出
                                        </a>
                                        <!-- <el-button type="primary" icon="el-icon-plus" size="mini" @click="exportPerson">导出联系人</el-button> -->
                                    </div>

                                    <div class="scrollBarX">
                                        <vue-table
                                            :api-url="addressBookTable.apiUrl"
                                            :fields="addressBookTable.fields"
                                            :appendParams="addressBookTable.queryParams"
                                            :content="self"
                                            ref="addressBookTable">
                                        </vue-table>
                                    </div>

                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <profession-add ref="professionAdd"></profession-add>
        <person-add ref = "personAdd"></person-add>
    </div>
</template>

<script>
    import {config} from "../../../../config.js";
    import profession_add from './ProfessionAdd'
    import person_add from './person-add'
    export default {
        components: {
            "profession-add":profession_add,
            "person-add":person_add
        },
        data() {
            return {
                self: this,
                // 树检索input值
                filterText: null,
                //院校树
                schoolTree: {
                    props: {
                        label: 'text',
                        children: 'children',
                        isLeaf: 'leaf'
                    },
                    /* dataList: [
                    ], */
                    emptyText: "暂无数据"
                },
                // tab分页组件
                tab: {
                    selectTabName: 'class', //默认选中选项卡
                },
                // 专业列表
                professionTable: {
                    apiUrl: api.professionManager.query,
                    queryParams: {
                        schoolId: null,
                        secondSchoolId: null,
                        professionalId: null,
                        professionNo:null,     // 专业代码
                        professionName:null   //专业名称
                    },
                    fields: [
                        {
                            prop: "professionNo",
                            label: "专业代码",
                        },
                        {
                            prop: "professionName",
                            label: "专业名称",
                        },
                        {
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "lengthOfSchoolingLabel",
                            label: "学制",
                        },
                        {
                            prop: "natureLabel",
                            label: "专业性质",
                        },
                        // {
                        //     prop: "userIdShow",
                        //     label: "培养方案",
                        // },
                        {
                            prop: "schoolLeaderName",
                            label: "校区主管",
                        },
                        {
                            prop: "__action",
                            label: "操作",
                            actions: [{
                                    label: "编辑",
                                    type: "edit",
                                    auth: 'profession:update',
                                    func: function(vm, row) {
                                        // console.log(vm)
                                        vm.$refs.professionAdd.editProfession(row.id,row.schoolId);
                                    }
                                },
                                {
                                    label: "删除",
                                    type: "delete",
                                    auth: 'profession:delete',
                                    func: function(vm, row) {
                                        // console.log(vm)
                                        vm.deleteClassById(row);
                                    }
                                },
                            ]
                        },
                    ],
                },
                // 联系人列表
                addressBookTable: {
                    apiUrl: api.addressBook.query,
                    queryParams: {
                        schoolId: "",
                        secondSchoolId: "",
                        name:""
                    },
                    fields: [{
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "name",
                            label: "姓名",
                        },
                        {
                            prop: "duty",
                            label: "职务",
                        },
                        {
                            prop: "telephone",
                            label: "手机",
                        },
                        {
                            prop: "remark",
                            label: "备注",
                        },
                        {
                            prop: "__action",
                            label: "操作",
                            actions: [{
                                    label: "编辑",
                                    type: "edit",
                                    auth: 'address:update',
                                    func: function(vm, row) {
                                        // console.log(vm)
                                        vm.$refs.personAdd.editProfession(row.id,row.schoolId);
                                    }
                                },
                                {
                                    label: "删除",
                                    type: "delete",
                                    auth: 'address:delete',
                                    func: function(vm, row) {
                                        console.log(vm)
                                        vm.deletePersonById(row.id);
                                    }
                                },
                            ]
                        },
                    ],
                },
                downloadPersonInfo:config.BASE_URL+api.addressBook.exportExcel,
            };
        },
        created() {
            // 院校树初始化 获取全部院校列表数据
            this.getSchoolTreeList();

        },
        mounted() {
            /* this.$on("deleteClassById",(row)=>{
                this.deleteClassById(row);
            }); */
        },
        watch: {
            filterText(val) {
                this.$refs.schoolTree.filter(val);
            }
        },
        methods: {
            // 查询节点
            filterNode(value, data, node) {
                console.log(data)
                if (!value) return true;
                return data.text.indexOf(value) !== -1;
            },
            // 院校树懒加载子节点数据
            loadNode(node, resolve) {

                let vm = this;
                if (node.level === 0) {
                    return resolve([{ id:0, text: '全部数据' }]);
                } else if (node.level == 1) { // 一级节点 : 全部数据
                    resolve(vm.$store.getters.getSchoolList)
                } else if (node.level == 2) { // 二级节点 : 学校数据.
                     // 获取二级院校数据
                    this.axios.get(api.getSecondSchoolList, {
                        params: {
                            schoolId: node.data.id
                        }
                    }).then((response) => {
                        if (response.data.success) {
                            // 填充二级院校数据集合
                            // console.log(JSON.stringify(response.data));
                            let treeTwo = [];
                            for(let i=0;i<response.data.data.length;i++){
                                treeTwo.push({
                                    id:response.data.data[i].id,
                                    text:response.data.data[i].text,
                                    leaf:true
                                });
                            }

                            resolve(treeTwo);
                        } else {
                            resolve([]);
                        }
                    })

                }else{
                    resolve(null);
                }
            },
            // 班级查询按钮
            queryProfession() {
                this.$refs.professionTable.$emit('vuetable:refresh');
            },
            //联系人查询
            queryPerson(){
                 this.$refs.addressBookTable.$emit('vuetable:refresh');
            },
            deleteClassById(row) {
                let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.professionManager.delete + row.id)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                message: response.data.msg,
                                type: 'success',
                            });
                            vm.$refs.professionTable.$emit('vuetable:current-refresh')
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                    })
                },()=>{})
            },
            deletePersonById(id){
                let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.addressBook.delete + id)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                message: response.data.msg,
                                type: 'success',
                            });
                            vm.$refs.addressBookTable.$emit('vuetable:current-refresh')
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                    })
                },()=>{})
            },
            // 点击树节点触发事件
            handleTreeNodeClick(data,node,treeObj){
                let queryParams = {};
                if(node.level == 1){
                    this.professionTable.queryParams.schoolId = null;
                    this.professionTable.queryParams.secondSchoolId = null;
                    this.addressBookTable.queryParams.schoolId = "";
                    this.addressBookTable.queryParams.secondSchoolId = "";


                }else if(node.level == 2){
                    this.professionTable.queryParams.schoolId = node.data.id;
                    this.professionTable.queryParams.secondSchoolId = null;

                    this.addressBookTable.queryParams.schoolId = node.data.id;
                    this.addressBookTable.queryParams.secondSchoolId = "";
                }else if(node.level == 3){
                    this.professionTable.queryParams.secondSchoolId = node.data.id;
                    this.professionTable.queryParams.schoolId = node.parent.data.id;

                    this.addressBookTable.queryParams.secondSchoolId = node.data.id;
                    this.addressBookTable.queryParams.schoolId = node.parent.data.id;
                }
                this.$refs.professionTable.$emit('vuetable:refresh');
                this.$refs.addressBookTable.$emit('vuetable:refresh');
            },
            // 打开新增班级dialog
            showAddClassDialog(){
                let schoolId = this.professionTable.queryParams.schoolId;
                let secondSchoolId = this.professionTable.queryParams.secondSchoolId;
                this.$refs.professionAdd.clear();
               this.$refs.professionAdd.showDialog(schoolId,secondSchoolId);
            },
            // 打开新增班级dialog
            showAddPersonDialog(){
                let schoolId = this.addressBookTable.queryParams.schoolId;
                let secondSchoolId = this.addressBookTable.queryParams.secondSchoolId;
                this.$refs.personAdd.clear();
                this.$refs.personAdd.showDialog(schoolId,secondSchoolId);
            },
            resert(){
                this.professionTable.queryParams.professionNo = null;
                this.professionTable.queryParams.professionName = null;
                this.$refs.professionTable.$emit('vuetable:refresh');
            },
            resertPerson(){
                this.addressBookTable.queryParams.name = "";
                this.$refs.addressBookTable.$emit('vuetable:refresh');
            },
            getSchoolTreeList(){
                this.$store.dispatch("getSchoolList");
            },
            exportPerson(){
                  let self = this;
                  let href = self.downloadPersonInfo;
                  href += "?Authorization="+localStorage.getItem("userToken")+self.getSearchParams();
                  console.log(href);
                  window.location.href = href;
            },
            getSearchParams(){
                let queryFormData = this.addressBookTable.queryParams;
                let params = [
                    "&schoolId="+queryFormData.schoolId,
                    "secondSchoolId="+queryFormData.secondSchoolId
                ].join("&")
                return params;
            },

        },
    };

</script>
<style scoped>
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }

</style>